<template>
  <div style="display: flex">
    <div v-if="userInfo.yhsf === '0'">
      <el-menu
          class="el-menu-vertical-demo"
          default-active="2"
          router
          style="height: 100%;background-color: #363644;padding: 30px 0;position: fixed;top: 50px;left: 0"
      >
        <el-menu-item index="/home/showuser">
          <el-icon>
            <User/>
          </el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="/home/yonghu">
          <el-icon>
            <User/>
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/home/dingdan">
          <el-icon>
            <Tickets/>
          </el-icon>
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item index="/home/shangjia">
          <el-icon>
            <Shop/>
          </el-icon>
          <span>商家管理</span>
        </el-menu-item>
        <el-menu-item index="/home/caipin">
          <el-icon>
            <KnifeFork/>
          </el-icon>
          <span>菜品管理</span>
        </el-menu-item>
        <el-menu-item index="/home/qishou">
          <el-icon>
            <Bicycle/>
          </el-icon>
          <span>骑手管理</span>
        </el-menu-item>
        <el-menu-item index="/home/peisong">
          <el-icon>
            <Position/>
          </el-icon>
          <span>配送管理</span>
        </el-menu-item>
        <el-menu-item index="/home/dizhi">
          <el-icon>
            <LocationInformation/>
          </el-icon>
          <span>地址管理</span>
        </el-menu-item>
        <el-menu-item index="/home/gouwuche">
          <el-icon>
            <ShoppingCart/>
          </el-icon>
          <span>购物车管理</span>
        </el-menu-item>
        <el-menu-item index="/home/shoucang">
          <el-icon>
            <Star/>
          </el-icon>
          <span>收藏管理</span>
        </el-menu-item>
        <el-menu-item index="/home/pingjia">
          <el-icon>
            <ChatLineRound/>
          </el-icon>
          <span>评价管理</span>
        </el-menu-item>
        <el-menu-item index="/showshouye">
          <el-icon><House /></el-icon>
          <span>返回首页</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div v-if="userInfo.yhsf === '6'">
      <el-menu
          class="el-menu-vertical-demo"
          default-active="2"
          router
          style="height: 100%;background-color: #363644;padding: 30px 0;position: fixed;top: 70px;left: 0"
      >
        <el-menu-item index="/home/showuser">
          <el-icon>
            <User/>
          </el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="/home/sjwork">
          <el-icon>
            <Menu/>
          </el-icon>
          <span>工作台</span>
        </el-menu-item>
        <el-menu-item index="/home/sjdd">
          <el-icon>
            <Tickets/>
          </el-icon>
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item index="/home/cp">
          <el-icon>
            <KnifeFork/>
          </el-icon>
          <span>菜品管理</span>
        </el-menu-item>
        <el-menu-item index="/home/sjpj">
          <el-icon>
            <ChatLineRound/>
          </el-icon>
          <span>评价管理</span>
        </el-menu-item>
        <el-menu-item index="/showshouye">
          <el-icon>
            <el-icon><House /></el-icon>
          </el-icon>
          <span>返回首页</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div v-if="userInfo.yhsf === '3'">
      <el-menu
          class="el-menu-vertical-demo"
          default-active="2"
          router
          style="height: 100%;background-color: #363644;padding: 30px 0;position: fixed;top: 70px;left: 0"
      >
        <el-menu-item index="/home/showuser">
          <el-icon>
            <User/>
          </el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="/home/showdd">
          <el-icon>
            <Menu/>
          </el-icon>
          <span>我的订单</span>
        </el-menu-item>
        <el-menu-item index="/home/showxx">
          <el-icon>
            <Tickets/>
          </el-icon>
          <span>我的消息</span>
        </el-menu-item>
        <el-menu-item index="/home/showsc">
          <el-icon>
            <KnifeFork/>
          </el-icon>
          <span>我的收藏</span>
        </el-menu-item>
        <el-menu-item index="/showshouye">
          <el-icon><House /></el-icon>
          <span>返回首页</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div v-if="userInfo.yhsf === '9'">
      <el-menu
          class="el-menu-vertical-demo"
          default-active="2"
          router
          style="height: 100%;background-color: #363644;padding: 30px 0;position: fixed;top: 70px;left: 0"
      >
        <el-menu-item index="/home/showuser">
          <el-icon>
            <User/>
          </el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="/home/qsdd">
          <el-icon>
            <Tickets/>
          </el-icon>
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item index="/showshouye">
          <el-icon><House /></el-icon>
          <span>返回首页</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div style="width: 160px;height: 100%"></div>
    <div style="flex: 1;">
      <div style="width: 90%; margin: 20px auto">
        <router-view></router-view>
      </div>

    </div>
  </div>

</template>

<script lang="ts" setup>
import {useUserStore} from '../pages/stores/user.ts'
import {storeToRefs} from 'pinia'
import {onMounted} from "vue";

const userStore = useUserStore()
const {userInfo} = storeToRefs(userStore)


onMounted(() => {
  userStore.setUser(JSON.parse(localStorage.getItem('userInfo') || 'null'))
})
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 140px;
  min-height: 400px;
}

:deep(.el-menu-item) {
  color: #ffffff !important;
}

:deep(.el-menu-item:hover) {
  color: #363644 !important;
}

:deep(.el-menu-item.is-active) {
  background-color: white;
  color: #363644 !important;
}
</style>